<template>
  <div class="chat-input">
    <div class="chat-input-box">
      <DialogEditor />
      <DialogAction />
      <DialogFiles />
    </div>
  </div>
</template>

<script setup lang="ts" name="DialogInput">
import DialogEditor from './input/DialogEditor.vue'
import DialogAction from './input/DialogAction.vue'
import DialogFiles from './input/DialogFiles.vue'
</script>

<style scoped>
.chat-input {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
  width: 100%;
}
.chat-input-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--ld-color-input-bg);
  border: 1px solid var(--ld-color-border);
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}
</style>
